<template>
    <div>
        <nav>
            <div>
                <img src="../../public/header/logo.png" alt="">
                <div class="ul">
                    <div class="li"><img src="../../public/header/women.png" @click="$router.push('/home/women')"><a  @click="$router.push('/home/women')">我们</a>
                        <ul>
						    <li @click="$router.push('/home/women')">企业介绍</li>
						    <li @click="$router.push('/home/fuwu')">服务理念</li>
						    <li @click="$router.push('/home/guoji')">国际战略</li>
						    <li @click="$router.push('/home/fenzhi')">分支机构</li>
						    <li @click="$router.push('/home/shipin')">食品安全</li>
					    </ul>
                </div>
                    <div class="li"><img src="../../public/header/pinpai.png"  @click="$router.push('/home/pinpai')" alt=""><a  @click="$router.push('/home/pinpai')">品牌</a>
                        <ul>
						    <li @click="$router.push('/home/pinpai')">品牌历史</li>
						    <li @click="$router.push('/home/rongyu')">品牌荣誉</li>
						    <li @click="$router.push('/home/chuancheng')">传承人</li>
					    </ul>
                </div>
                    <div class="tu" @click="$router.push('/home/index')"><img src="../../public/header/index.png" class="index"></div>
                    <div class="li"><img src="../../public/header/chanpin.png" alt=""  @click="$router.push('/home/chanpin')"><a  @click="$router.push('/home/chanpin')">产品</a>
                        <ul>
						    <li @click="$router.push('/home/chanpinliebiao/'+0)">糕点系列</li>
						    <li @click="$router.push('/home/chanpinliebiao/'+1)">休闲食品</li>
						    <li @click="$router.push('/home/chanpinliebiao/'+2)">节日食品</li>
						    <li @click="$router.push('/home/chanpinliebiao/'+3)">面包主食</li>
						    <li @click="$router.push('/home/chanpinliebiao/'+4)">坚果系列</li>
						    <li @click="$router.push('/home/chanpinliebiao/'+5)">速冻食品</li>
					    </ul>
                </div>
                    <div class="li" @click="goShop"><img src="../../public/header/gwc.png" alt=""><a>购物车</a></div>
                    <div style="margin-left: 60px;">
                    <el-button type="info" plain @click="$router.push('/home/select')">搜索</el-button>
                </div>
                </div>
                <div class="btn" v-if="id==null">
                <el-button @click="$router.push('/login')">登录</el-button>
                <el-button @click="$router.push('/logon')"> 注册</el-button>
                </div>
                <div v-else @click="$router.push('/home/gerenzhongxin/'+ id + '/mydingdan/quanbu')">
                    <i class="el-icon-user-solid"></i>
                    <span>{{phone}}</span>
                </div>

                
            </div>
        </nav>
        <div class="kong"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            type: ['糕点系列','休闲食品','节日食品','面包主食','坚果系列','速冻食品'],
            id:null,
            phone:'',
            id:localStorage.getItem('userId')
        }
    },
    methods: {

      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      goShop(){
        let userId = localStorage.getItem('userId')
        if(userId == null){
            this.$router.push('/login')
        }else{
            this.$router.push('/home/shop/'+userId)
        }
      }
    },
    mounted(){
        this.id=localStorage.getItem("userId") 
        console.log(this.id);
        this.phone=localStorage.getItem("userShoujihao") 
        console.log(this.phone);
    }
}
</script>

<style lang="scss" scoped>
.kong {
    height: 100px;
}
nav {
    height: 100px;
    margin: 0;
    padding: 0;
    background-color: #CEAF59;
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 1275px;
    z-index: 999;

    >div {
        background-color: #FCF9F0;
        height: 95%;
        position: relative;
        top: 5px;
        display: flex;
        align-items: center;
        >img{
            width: 15%;
            height: 33px;
            margin: 0 30px;
        }
        >.ul{
            list-style: none;
            display: flex;
            align-items: center;
            width: 70%;
            >.tu{
                width: 121px;
                height: 116px;
                background-color: #E60012;
                border-radius: 0 0 10px 10px;
                >img{
                    width: 121px;
                    height: 90px;
                    margin-top: 10px;
                }
            }
            >.li{
                display: flex;
                flex-direction: column;
                width: 20%;
                height: 100px;
                border: 1px solid #CEAF59;
                border-bottom-color: transparent;
                &:hover{
                    background-color: #FEFCF8;
                }
                >img{
                    width: 50px;
                    height: 50px;
                    margin: 10px auto;
                }
                >a{
                    color: #664F10;
                    font-weight:lighter;
                }
                    &.li:hover ul{
                        display: block;
                    }
                    >ul{
                    position: fixed;
                    top: 100px;
                    display: none;
                    padding: 0;
                    margin: 0;
                    width: 100%;
                    list-style: none;
                    background-color: #CEAF59;
                    width: 13.5%;
                    min-width: 180px;
                    >li{
                        background-color: #E4DCC7;
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        margin-bottom: 1px;
                        &:hover{
                            background-color: #CEAF59;
                            color: #fff;
                        }
                    }
                }   
            }
        }
        .btn{
            width: 15%;
        }
    }
}

</style>